<template>
  <div id="binding-weichat" class="pl13-pt13">
    <header>
      <img src="./user_top.jpg" width="125" height="125"/>
      <p class="tc f16 mt5" style="color: #747474">跟我一起去旅行</p>
    </header>
    <footer class="flex align-center">
      <i-button  type="success" i-class="binding-buttons" class="flex1 mr10" @tap="passwordmodeal = true">绑定</i-button>
      <i-button  i-class="binding-buttons cancel" class="flex1" @tap="cancel">取消</i-button>
    </footer>
    <i-modal :visible="passwordmodeal">
      <div class="pr tl" style="padding: 0 30px;">
        <img src="./success.png" style="width: 100%;"/>
        <p class="f20 tc">绑定成功</p>
        <p class="f13 tc" style="color: #747474">微信跟我一起浪”已解绑了</p>
        <i-button class="mt10" type="success" i-class="fp-button" @click="cancel" shape="circle" size="small">关闭</i-button>
      </div>
    </i-modal>
  </div>
</template>

<script type="ECMAScript 6">
    export default {
        name: 'binding-weichat',
        data () {
          return {
            passwordmodeal: false
          };
        },
        onReady () {
          this.passwordmodeal = false;
        },
        methods: {
          cancel () {
            wx.navigateBack({ delta: 1 });
          }
        },
    };
</script>

<style lang="stylus" scoped>
  #binding-weichat
    display flex; flex-flow: column; background #fff;min-height: 100vh;
    header
      flex 1; width 100%; margin-top 30%;
      img
        display block; margin 0 auto; border-radius 6px; border 4px solid #f2f2f2;
    footer
      margin-bottom 10%;
</style>

<style lang="stylus">
  .binding-buttons
    margin 0!important; flex 1!important;
  .cancel
    background #F2F2F2!important; border-color #F2F2F2!important; color #747474!important;
</style>
